<script setup>
import { ref } from 'vue'
import { BookOpen, BarChart2, Award, ArrowRight, Loader2 } from 'lucide-vue-next'
// import { motion } from 'framer-motion'

// Define variants for animation
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2
    }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5
    }
  }
}

// Mock data for recommended problems
const recommendedProblems = ref([
  {
    id: 1,
    title: '二次函数图像绘制',
    description: '学习如何绘制标准形式的二次函数图像并分析其性质',
    difficulty: '初级',
    category: '代数',
    attempts: 1250
  },
  {
    id: 2,
    title: '勾股定理应用',
    description: '解决现实生活中的直角三角形问题',
    difficulty: '中级',
    category: '几何',
    attempts: 892
  }
])

const loading = ref(false)
const error = ref(null)
</script>

<template>
  <div class="max-w-6xl mx-auto">
    <motion.div 
      class="text-center py-12 md:py-20" 
      :initial="{ opacity: 0, y: 20 }" 
      :animate="{ opacity: 1, y: 0 }"
      :transition="{ duration: 0.5 }"
    >
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-blue-600 via-purple-600 to-teal-500 bg-clip-text text-transparent">
        互动数学学习平台
      </h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
        通过可视化概念、逐步解题和进度跟踪，让数学学习更轻松有趣
      </p>
<!--
      <button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-full shadow-md hover:shadow-lg transform transition hover:scale-105">
        立即开始学习
      </button>
    -->
    </motion.div>

    <motion.div 
      class="grid grid-cols-1 md:grid-cols-3 gap-8 my-16" 
      :variants="containerVariants" 
      :initial="'hidden'"
      :animate="'visible'"
    >
      <motion.div 
        :variants="itemVariants"
        class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow"
      >
        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-4">
          <BookOpen class="h-6 w-6 text-blue-600" />
        </div>
        <h3 class="text-xl font-semibold mb-2">互动解题</h3>
        <p class="text-gray-600">
          通过实践学习，使用互动工具操作几何图形、绘制函数图像，并获得即时反馈
        </p>
      </motion.div>

      <motion.div 
        :variants="itemVariants"
        class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow"
      >
        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-4">
          <BarChart2 class="h-6 w-6 text-purple-600" />
        </div>
        <h3 class="text-xl font-semibold mb-2">可视化学习</h3>
        <p class="text-gray-600">
          通过动态图形理解复杂概念，让数学知识生动形象
        </p>
      </motion.div>

      <motion-div 
        :variants="itemVariants"
        class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow"
      >
        <div class="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center mb-4">
          <Award class="h-6 w-6 text-teal-600" />
        </div>
        <h3 class="text-xl font-semibold mb-2">进度追踪</h3>
        <p class="text-gray-600">
          通过数据分析监控学习成长，识别优势和需要提升的领域
        </p>
      </motion-div>
    </motion.div>

    <div class="my-16">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">推荐题目</h2>
        <button class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
          <span class="mr-1">查看全部</span>
          <ArrowRight :size="16" />
        </button>
      </div>

      <div v-if="loading" class="flex items-center justify-center h-64">
        <Loader2 class="w-8 h-8 text-blue-500 animate-spin" />
      </div>
      <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-4">
        <p class="text-red-700 text-center">{{ error }}</p>
        <button @click="window.location.reload()"
          class="mt-2 mx-auto block px-4 py-2 text-red-700 hover:bg-red-100 rounded-md transition-colors"
        >
          重试
        </button>
      </div>
      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <motion.div 
          v-for="problem in recommendedProblems" 
          :key="problem.id"
          class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 hover:shadow-md transition-shadow"
          :whileHover="{ y: -4 }" 
          :transition="{ type: 'spring', stiffness: 300, damping: 20 }"
        >
          <h3 class="font-medium text-lg mb-2">{{ problem.title }}</h3>
          <p class="text-gray-600 text-sm mb-3">{{ problem.description }}</p>
          <div class="flex items-center space-x-3 text-sm mb-3">
            <span :class="`px-2 py-1 rounded-full ${ 
              problem.difficulty === '初级' ? 'bg-green-100 text-green-800' :
              problem.difficulty === '中级' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800' 
            }`">
              {{ problem.difficulty }}
            </span>
            <span class="text-gray-600">{{ problem.category }}</span>
          </div>
          <div class="text-sm text-gray-500">
            {{ problem.attempts.toLocaleString() }} 名学生已尝试
          </div>
        </motion.div>
      </div>
    </div>
  </div>
</template>
